<template>
  <div class="home">
    <!-- 背景图 -->
    <div class="top">
      <div class="top_content">
        <div class="title">
          <title1 :msg="logoPng"></title1>
        </div>
        <div class="flexEnd" style="width:1200px;margin:0 auto">
          <div class="anquan" style="cursor:pointer" @click="routeLaborCenter">
            <span>
              <img src="@/assets/homeImg/shuju.png" alt />
            </span>
            <!-- <span style=""> -->
            劳务数据中心
            <!-- </span> -->
            <img src="@/assets/homeImg/jiantou.png" alt style="margin-left:4px" />
          </div>
        </div>

        <div class="situation flexCenter">
          <div class="lankuang">
            <div class="text">项目接入情况</div>
            <div class="content flexAround">
              <div>
                <div class="content_top flexAround">
                  <div>{{this.topInfo.projectTotal}}</div>
                  <div>个</div>
                </div>
                <div class="content_bottom">接入项目</div>
              </div>
              <div>
                <div class="content_top flexAround">
                  <div>{{this.topInfo.orgTotal}}</div>
                  <div>个</div>
                </div>
                <div class="content_bottom">接入单位</div>
              </div>
            </div>
          </div>
          <div class="lankuang">
            <div class="text">项目人员情况</div>
            <div class="content flexAround">
              <div>
                <div class="content_top flexAround">
                  <!-- <div>{{this.topInfo.managementTotal}}</div> -->
                  <div>{{this.topInfo.managementTotal}}</div>
                  <div>人</div>
                </div>
                <div class="content_bottom">在场管理人员</div>
              </div>
              <div>
                <div class="content_top flexAround">
                  <div>{{this.topInfo.laborTotal}}</div>
                  <div>人</div>
                </div>
                <div class="content_bottom">在场劳务人员</div>
              </div>
            </div>
          </div>
          <div class="lankuang">
            <div class="text">工资支付情况</div>
            <div class="content flexAround">
              <div>
                <div class="content_top flexAround">
                  <div>{{(this.topInfo.wagePayTotal/10000).toFixed(2)}}</div>
                  <div>万元</div>
                </div>
                <div class="content_bottom">累计支付</div>
              </div>
              <div>
                <div class="content_top flexAround">
                  <div>0</div>
                  <div>次</div>
                </div>
                <div class="content_bottom">拖欠工资</div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel">
          <div style="width:1200px;margin:0 auto;position:relative">
            <div class="moreList" @click="moreList">更多&nbsp;></div>
            <a-carousel dot-position="right" autoplay :dots="false" style="width:1200px;">
              <div class="carDiv">
                <span class="imgSpan">
                  <!-- <img style="margin-left:0px" src="@/assets/homeImg/tongzhi.png" alt="" /> -->
                </span>
                <span class="text" @click="NoticeDetail">《保障农民工工资支付条例》5月1日正式实施</span>
                <span>2021年2月12日&nbsp;星期五</span>
              </div>
              <!-- <div class="carDiv">
                <span class="imgSpan">
                
                </span>
                <span class="text" @click="NoticeDetail">春节假期后第一天，李克强开会部署这件事</span>
                <span>2021年2月28日&nbsp;星期日</span>
              </div> -->
            </a-carousel>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
    <!-- <div class="center flexBetween1">
      <div>
        <div>
          <img style="margin-right:7px" src="../../assets/homeImg/kaoqin.png" alt />
          项目主要人员考勤
        </div>
      </div>
      <div class="center_2">
        <div>
          <img style="margin-right:7px" src="../../assets/homeImg/jiancha.png" alt />
          专项检查
        </div>
      </div>
      <div class="center_3">
        <div>
          <img style="margin-right:7px" src="../../assets/homeImg/choucha.png" alt />
          电话抽查
        </div>
      </div>
      <div class="center_4">
        <div>
          <img style="margin-right:7px" src="../../assets/homeImg/shangbao.png" alt />
          项目上报
        </div>
      </div>
    </div> -->
    <!-- 项目列表 -->
    <div class="map">
      <div class="map_title">项目列表</div>
      <Map></Map>
    </div>
    <!-- 政策法规 -->
    <div>
      <Bottom></Bottom>
    </div>
    <!-- <supportCompany></supportCompany> -->
  </div>
</template>

<script>
import Map from './map/index'
import Bottom from './bottom/index'
import title1 from '@/views/title/index1.vue'
import logoPng from '@/assets/homeImg/logoLan.png'
import { getWageStatistics } from '@/api/gateway'
// import supportCompany from "@/views/supportCompany/index.vue"
export default {
  name: 'Home',
  components: {
    Map,
    Bottom,
    title1
    // supportCompany
  },
  data() {
    return {
      logoPng: logoPng,
      topInfo:{}
    }
  },
  mounted() {
    window.scrollTo(0, 0)
    this.getStatistics()
  },
  methods: {
    moreList() {
      this.$router.push({ path: '/list' })
    },
    NoticeDetail() {
      const { href } = this.$router.resolve({
        path: '/detail'
      })

      window.open(href, 'href')
    },
    getStatistics() {
      getWageStatistics({}).then((res) => {
        let data=res.data.data
        // console.log(data);
        this.topInfo=data
      })
    },
    routeLaborCenter(){
      this.$router.push({path:'/laborCenter'})
    }
  }
}
</script>
<style scoped>
.home {
  color: white;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
}
.top {
  width: 100%;
  height: 480px;
  /* opacity: 0.48; */
  background: url(../../assets/homeImg/background.png) no-repeat fixed top;
  margin-bottom: 50px;
}
.top_content {
  width: 100%;
  margin: 0 auto;
}
.situation {
  margin-bottom: 30px;
}
.situation :nth-child(3) {
  margin-right: 0;
}
.lankuang {
  width: 382px;
  height: 220px;
  background: rgba(39, 141, 230, 0.65);
  border: 1px solid #9ac9f2;
  margin-right: 27px;
}
.lankuang .text {
  width: 132px;
  height: 23px;
  font-size: 22px;

  line-height: 31px;
  margin-top: 32px;
  margin-left: 34px;
}
content {
  font-family: Microsoft YaHei;
  font-weight: 400;

  font-size: 16px;
}
.content_top {
  line-height: 91px;
}
.content_bottom {
  line-height: 31px;
}
.content_top :nth-child(1) {
  width: 37px;
  height: 28px;
  font-size: 34px;
  margin-right: 65px;
}
.title {
  width: 100%;
  height: 100px;
  line-height: 100px
}
.anquan {
  width: 200px;
  height: 44px;
  background: rgba(0, 0, 0, 0.2);
  margin: 23px 0;
  line-height: 44px;
}
.anquan span {
  display: inline-block;
  margin-left: 23px;
  margin-right: 12px;
}
.carousel {
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.2);
}
.moreList {
  position: absolute;
  z-index: 11;
  right: 0;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
  height: 40px;
  cursor: pointer;
}
.carDiv {
  width: 100%;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  height: 40px;
  line-height: 40px;
  float: left;
  text-align: left;
  /* display: flex;
  justify-content: space-between; */
}
.carDiv span {
  display: inline-block;
}
.carDiv :nth-child(1) {
  margin-left: 14px;
  vertical-align: middle;
}
.carDiv :nth-child(2) {
  font-size: 14px;
  margin-left: 14px;
}
.carDiv :nth-child(3) {
  margin-left: 87px;
}
.carDiv :nth-child(4) {
  float: right;
}
.carDiv :nth-child(4):hover {
  /* color: rgb(81, 170, 248); */
  cursor: pointer;
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 40px;
  line-height: 40px;
  /* background: #364d79; */
  overflow: hidden;
}
.center {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: 22px;
}
.imgSpan {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url('../../assets/homeImg/tongzhi.png') no-repeat center;
  line-height: 40px;
  transform: translateY(-3px);
}
.center div {
  width: 277px;
  height: 110px;
  background: linear-gradient(0deg, #b2cdfb, #5e90ed);
  display: flex;
  justify-content: center;
  align-items: center;
}
.center .center_2 div {
  background: linear-gradient(180deg, #2f80ed, #56ccf2);
}
.center .center_3 div {
  background: linear-gradient(180deg, #3aa6c7, #a2f3cf);
}
.center .center_4 div {
  background: linear-gradient(180deg, #745fd0, #a8c0ff);
}
.center div:hover {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.map {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 70px;
}
.map_title {
  font-size: 32px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  margin-bottom: 29px;
}
.carDiv:hover {
  /* color: #ff8a00; */
  cursor: pointer;
}
</style>
